<template>
  <div class="dispatch-record-container">
    <el-card class="filter-card" shadow="never" :body-style="{ padding: '20px 20px 0 20px' }" v-if="!IsShowDetail">
      <el-form :inline="true" :model="queryParams" class="filter-form" size="small" >
        <el-form-item label="单据编号">
          <el-input v-model="queryParams.receiptNumber" placeholder="请输入单据编号" clearable />
        </el-form-item>
        <el-form-item label="调出门仓">
          <!-- <el-input v-model="queryParams.transferOutStore" placeholder="请输入调出门仓" clearable /> -->
           <el-cascader
            v-model="queryParams.transferOutStoreId"
            :options="storeList"
            :props="{ expandTrigger: 'hover', value: 'id', label: 'name' }"
            @change="handleTransferOutStoreChange"
            clearable
          ></el-cascader>
        </el-form-item>
        <el-form-item label="调入门仓">
          <!-- <el-input v-model="queryParams.transferInStore" placeholder="请输入调入门仓" clearable /> -->
          <el-cascader
            v-model="queryParams.transferInStoreId"
            :options="storeList"
            :props="{ expandTrigger: 'hover', value: 'id', label: 'name' }"
            @change="handleTransferInStoreChange"
            clearable
          ></el-cascader>
        </el-form-item>
        <el-form-item label="单据日期">
          <el-date-picker
            v-model="queryParams.receiptTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item label="审核状态">
          <el-select v-model="queryParams.auditStatus" placeholder="请选择" clearable>
            <el-option label="待审核" :value="1" />
            <el-option label="已通过" :value="2" />
            <el-option label="未通过" :value="3" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">查询</el-button>
          <el-button @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="table-card" shadow="never" :body-style="{ padding: '20px 20px' }">
      <div v-if="IsShowDetail" class="detail-header-row">
        <el-button type="primary" @click="handleCloseDetail" class="detail-close-btn">关闭</el-button>
        <el-form :model="detailTableData" label-width="100px" :inline="true" class="detail-header-form">
          <el-form-item label="调出门仓:" class="detail-header-item">
            <el-input :readonly="true" v-model="detailTableData.transferOutStore" placeholder="请输入调出门仓" clearable size="small" />
          </el-form-item>
          <el-form-item label="调入门仓:" class="detail-header-item">
            <el-input :readonly="true" v-model="detailTableData.transferInStore" placeholder="请输入调入门仓" clearable size="small" />
          </el-form-item>

          <el-form-item label="调货原因:" class="detail-header-item">
            <el-input :readonly="true" v-model="detailTableData.remarks" placeholder="请输入调货原因" clearable size="small" />
          </el-form-item>

         <el-form-item label="单据日期" class="detail-header-item">
          <el-input :readonly="true" v-model="detailTableData.receiptTime" placeholder="请输入单据日期" clearable size="small" />
         </el-form-item>
        </el-form>
      </div>
      <el-table
        :data="list"
        v-loading="loading"
        border
        stripe
        style="margin-top: 16px"
        v-if="!IsShowDetail"
        :key="Math.random()"
      >
        <!-- 随机数 -->

        <!-- 单据编号 -->
        <el-table-column prop="receiptNumber" label="单据编号" align="center" />
        <!-- 单据日期 -->
        <el-table-column prop="receiptTime" label="单据日期" align="center" />
        <el-table-column prop="transferOutStore" label="调出门仓" align="center" />
        <el-table-column prop="transferInStore" label="调入门仓" align="center" />
        <el-table-column prop="totalNumber" label="总数量" align="center" />
        <el-table-column prop="documentPreparer" label="制单人" align="center" />
        <el-table-column prop="auditStatus" label="审核状态" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.auditStatus === 1" type="warning">待审核</el-tag>
            <el-tag v-else-if="scope.row.auditStatus === 2" type="success">已通过</el-tag>
            <el-tag v-else-if="scope.row.auditStatus === 3" type="danger">未通过</el-tag>
            <el-tag v-else>未知</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="更新时间" align="center" />
        <el-table-column label="操作" align="center" width="80">
          <template slot-scope="scope">
            <el-link type="primary" style="cursor: pointer;font-size: 12px;" @click="handleDetail(scope.row)">详情</el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-if="!IsShowDetail"
        style="margin-top: 16px; text-align: right"
        :current-page="queryParams.page"
        :page-size="queryParams.limit"
        :total="total"
        layout="total, prev, pager, next, jumper"
        @current-change="handlePageChange"
        @size-change="handleSizeChange"
        :page-sizes="[10, 20, 50, 100]"
        background
        :pager-count="5"
      />
      <el-table
        :data="transferTableData"
        v-loading="loading"
        border
        stripe
        style="margin-top: 16px"
        v-if="IsShowDetail"
        :key="Math.random()"
      >
        <el-table-column type="index" label="序号" width="60" align="center" />
        <el-table-column prop="productName" label="商品名称" align="center" />
        <el-table-column prop="image" label="图片" align="center" width="70">
          <template slot-scope="scope">
            <img
              v-if="scope.row.image"
              :src="scope.row.image"
              alt=""
              style="width: 40px; height: 40px; object-fit: cover; border-radius: 4px; border: 1px solid #eee"
            />
          </template>
        </el-table-column>
        <el-table-column prop="sku" label="商品规格" align="center" />
        <el-table-column prop="productAttrValueId" label="商品编码" align="center" />
        <el-table-column prop="unitName" label="单位" align="center" width="60" />
        <el-table-column prop="price" label="单价" align="center" />
        <el-table-column prop="transferOutStoreThenStock" label="调出门仓库存" align="center" />
        <el-table-column prop="transferOutNumber" label="调拨数量" align="center" />
        <el-table-column prop="transferInStoreThenStock" label="调入门仓库存" align="center" />
        <!-- <el-table-column prop="remark" label="备注" align="center" /> -->
      </el-table>
      <el-pagination
        v-if="IsShowDetail"
        style="margin-top: 16px; text-align: right"
        :current-page="detailPage"
        :page-size="detailLimit"
        :total="detailTotal"
        layout="total, prev, pager, next, jumper"
        @current-change="handleDetailPageChange"
        @size-change="handleDetailSizeChange"
        :page-sizes="[10, 20, 50, 100]"
        background
        :pager-count="5"
      />
    </el-card>
  </div>
</template>

<script>
import { listTransferOrder, transferOrderInfo, listStore } from '@/api/commercial';
export default {
  data() {
    return {
      storeList: [
        { name: '仓库', id: 1, children: [] },
        { name: '门仓', id: 2, children: [] },
      ],
      list: [],
      total: 0,
      loading: false,
      queryParams: {
        page: 1,
        limit: 10,
        receiptNumber: '',
        transferOutStore: '',
        transferInStore: '',
        auditStatus: '',
        receiptTime: [],
        transferOutStoreId: [],
        transferInStoreId: [],
      },
      IsShowDetail: false,
      transferTableData: [],
      detailPage: 1,
      detailLimit: 10,
      detailTotal: 0,
      currentDetailId: null,
      detailTableData: {},
    };
  },
  created() {
    this.getList();
    this.getStoreList();

  },
  methods: {
    handleTransferOutStoreChange(val) {
      // console.log(val,199);
      this.queryParams.transferOutType = val[0];

    },
    handleTransferInStoreChange(val) {
      // console.log(val,200);
      this.queryParams.transferInType = val[0];
    },
      getStoreList() {
      // 类型(1仓库 2门仓)
      listStore({ type: 1, page: 1, limit: 999 }).then((res) => {
        // this.storeList = res.data;
        console.log(res);
        this.storeList[0].children = res.list;
      });
      listStore({ type: 2, page: 1, limit: 999 }).then((resr) => {
        // this.storeList = res.data;
        console.log(resr);
        this.storeList[1].children = resr.list;
      });
    },
    getTransferOrderDetail(id) {
      this.currentDetailId = id;
      transferOrderInfo({
        id: id,
        page: this.detailPage,
        limit: this.detailLimit
      }).then((res) => {
        this.transferTableData = res.list || [];
        this.detailTotal = res.total || 0;
      });
    },
    async getList() {
      this.loading = true;
      // 构造查询参数
      const params = {
        ...this.queryParams,
        receiptStartTime:
          this.queryParams.receiptTime && this.queryParams.receiptTime[0] ? this.queryParams.receiptTime[0] : '',
        receiptEndTime:
          this.queryParams.receiptTime && this.queryParams.receiptTime[1] ? this.queryParams.receiptTime[1] : '',
      };
      if(this.queryParams.transferOutStoreId.length > 0){  
        params.transferOutStoreId = this.queryParams.transferOutStoreId[1];
      }
      if(this.queryParams.transferInStoreId.length > 0){
        params.transferInStoreId = this.queryParams.transferInStoreId[1];
      }
      // delete params.transferOutStoreId;
      // delete params.transferInStoreId;
      delete params.receiptTime;
      try {
        const res = await listTransferOrder(params);
        console.log(res);
        if (res) {
          this.list = res.list || [];
          this.total = res.total || 0;
        }
      } finally {
        this.loading = false;
      }
    },
    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },
    resetQuery() {
      this.queryParams = {
        page: 1,
        limit: 10,
        receiptNumber: '',
        transferOutStore: '',
        transferInStore: '',
        auditStatus: '',
        receiptTime: [],
        transferOutStoreId: [],
        transferInStoreId: [],
      };
      this.getList();
    },
    handlePageChange(page) {
      this.queryParams.page = page;
      this.getList();
    },
    handleSizeChange(size) {
      this.queryParams.limit = size;
      this.getList();
    },
    handleDetail(row) {
      this.detailTableData = row;
      this.IsShowDetail = true;
      this.detailPage = 1;
      this.currentDetailId = row.id;
      this.getTransferOrderDetail(row.id);
    },
    handleCloseDetail() {
      this.IsShowDetail = false;
    },
    handleDetailPageChange(page) {
      this.detailPage = page;
      this.getTransferOrderDetail(this.currentDetailId);
    },
    handleDetailSizeChange(size) {
      this.detailLimit = size;
      this.detailPage = 1;
      this.getTransferOrderDetail(this.currentDetailId);
    },
  },
};
</script>

<style scoped>
.dispatch-record-container {
  background: #f5f6fa;
  min-height: 100vh;
  padding: 24px 32px;
}
.filter-card,
.table-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  margin-bottom: 24px;
  border: none;
}
.filter-form {
  margin-bottom: 0;
}
.detail-header-row {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.detail-close-btn {
  margin-right: 16px;
  height: 32px;
  display: flex;
  align-items: center;
}
.detail-header-form {
  display: flex;
  align-items: center;
}
.detail-header-item {
  margin-bottom: 0 !important;
}
::v-deep .detail-header-form .el-form-item__label {
  line-height: 32px;
  height: 32px;
  padding-right: 8px;
}
::v-deep .detail-header-form .el-input__inner {
  height: 32px;
  line-height: 32px;
}
</style>
